
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <script src="http://oog4yfyu0.bkt.clouddn.com/echarts.min.js"></script>
    <script type="text/javascript " src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript " src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/wordcloud.js"></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/anhui.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/aomen.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/beijing.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/chongqing.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/fujian.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/gansu.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/guangdong.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/guangxi.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/guizhou.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/hainan.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/hebei.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/heilongjiang.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/henan.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/hubei.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/hunan.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/jiangsu.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/jiangxi.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/jilin.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/liaoning.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/neimenggu.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/ningxia.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/qinghai.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/shangdong.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/shanghai.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/shanxi.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/sichuan.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/taiwan.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/tianjin.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/xianggang.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/xinjiang.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/xizang.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/yunnan.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/zhejiang.js "></script>
    <script type="text/javascript " src="http://oog4yfyu0.bkt.clouddn.com/guangdong.js "></script>
    <script type="text/javascript " src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM "></script>
    <script type="text/javascript " src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js "></script>
</head>

<body>
    <div id="main" style="width: 800px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
    "backgroundColor": "#fff",
    "series": [
        {
            "data": [
                "3927",
                "2346",
                "1245",
                "1005",
                "806",
                "970",
                "1352",
                "3012",
                "3535",
                "4082",
                "4634",
                "4687",
                "5184",
                "4429",
                "4120",
                "4322",
                "4303",
                "5242",
                "4789",
                "5069",
                "5252",
                "5690",
                "5930",
                "5590"
            ],
            "name": "发帖人数",
            "markLine": {
                "data": []
            },
            "stack": "",
            "step": false,
            "smooth": true,
            "markPoint": {
                "data": []
            },
            "type": "line",
            "lineStyle": {
                "normal": {
                    "curveness": 0,
                    "opacity": 1,
                    "width": 1,
                    "type": "solid"
                }
            },
            "symbol": "emptyCircle",
            "showSymbol": true,
            "areaStyle": {
                "normal": {
                    "opacity": 0.3,
                    "color": null
                }
            },
            "label": {
                "normal": {
                    "formatter": null,
                    "textStyle": {
                        "color": "#000",
                        "fontSize": 12
                    },
                    "position": "top",
                    "show": true
                },
                "emphasis": {
                    "show": true
                }
            }
        }
    ],
    "color": [
        "#c23531",
        "#2f4554",
        "#61a0a8",
        "#d48265",
        "#749f83",
        "#ca8622",
        "#bda29a",
        "#6e7074",
        "#546570",
        "#c4ccd3"
    ],
    "toolbox": {
        "feature": {
            "saveAsImage": {
                "show": true
            }
        },
        "orient": "vertical",
        "top": "center",
        "left": "right",
        "show": true
    },
    "yAxis": {
        "name": "",
        "nameTextStyle": {
            "fontSize": 14
        },
        "type": "value",
        "axisLabel": {
            "formatter": "{value} "
        },
        "nameGap": 25,
        "nameLocation": "middle"
    },
    "legend": {
        "orient": "horizontal",
        "data": [
            "发帖人数"
        ],
        "show": true,
        "left": "center",
        "top": "top",
        "selectedMode": true
    },
    "tooltip": {},
    "xAxis": {
        "name": "",
        "nameTextStyle": {
            "fontSize": 14
        },
        "type": "category",
        "axisLabel": {
            "interval": "auto"
        },
        "nameGap": 25,
        "nameLocation": "middle",
        "data": [
            "0时",
            "1时",
            "2时",
            "3时",
            "4时",
            "5时",
            "6时",
            "7时",
            "8时",
            "9时",
            "10时",
            "11时",
            "12时",
            "13时",
            "14时",
            "15时",
            "16时",
            "17时",
            "18时",
            "19时",
            "20时",
            "21时",
            "22时",
            "23时"
        ]
    },
    "title": {
        "text": "发帖时间分布折线图",
        "subtextStyle": {
            "color": "#aaa",
            "fontSize": 12
        },
        "left": "auto",
        "subtext": "数据来源：“龙华吧”91521条数据",
        "textStyle": {
            "color": "#000",
            "fontSize": 18
        }
    }
};
        myChart.setOption(option);
    </script>
</body>

</html>
